<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>

    </h:head>
    <h:body>
        <ui:composition template="./plantillas/plantillaGeneral.xhtml">
            <ui:define name="titulo">
                Demo EJB+JPA+JSF :: Catálogo de productos (Ejemplo AJAX con Primefaces)
            </ui:define>

            <ui:define name="encabezado">
                <ui:include src="./plantillas/vistaCabecera.xhtml"/>
            </ui:define>

            <ui:define name="izquierda">
                <ui:include src="./plantillas/vistaIzquierda.xhtml"/>
            </ui:define>

            <ui:define name="contenido">
                <h:form prependId="false">  <!-- prependId="false" necesario para que se actualice el p:dialog -->
                    <p:messages showDetail="true"/>
                    
                    <p:fieldset  legend="Productos disponibles">
                        <p:dataGrid id="listadoProductos" columns="3" rows="6" paginator="true" var="producto"  value="#{catalogoController.productos}">
                            <p:column>
                                <p:panel id="panelProducto" header="#{producto.familia.nombre}" style="text-align:center">
                                    <h:outputText value="#{producto.descripcion}" />
                                    <p:commandLink update="panelDetalleProducto" oncomplete="dialogoProducto.show()" title="Ver detalles">  
                                        <h:graphicImage library="images" name="search.png"/>  
                                        <f:setPropertyActionListener value="#{producto}"   
                                                                     target="#{carroCompraController.productoSeleccionado}" />  
                                    </p:commandLink> 

                                    <h:panelGrid columns="2">
                                        <h:graphicImage library="images" name="generic.jpg" width="125px"/>
                                        <h:panelGrid columns="1">    
                                            <h:outputText value="Marca: #{producto.marca}" />
                                            <h:outputText value="Modelo: #{producto.modelo}" />
                                            <h:outputText value="Precio: #{producto.precio}"/>
                                        </h:panelGrid>
                                    </h:panelGrid>
                                </p:panel>

                                <p:draggable for="panelProducto" revert="true"  helper="clone" opacity="0.85"
                                             handle=".ui-panel-titlebar" stack=".ui-panel"/> 
                            </p:column>
                        </p:dataGrid>



                    </p:fieldset>

                    <p:fieldset id="panelCarroCompra" legend="Carrito de la compra">
                        <p:outputPanel id="dropArea">
                            <h:outputText value="!!!Arrastre aquí sus productos!!!"  
                                          rendered="#{empty carroCompraController.productos}"  
                                          style="font-size:24px;" />  

                            <p:dataTable  var="productoCompra" value="#{carroCompraController.productos}"
                                          rendered="#{not empty carroCompraController.productos}" >
                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Descripción"/>                                        
                                    </f:facet>
                                    <h:outputText value="#{productoCompra.producto.descripcion}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Marca"/>
                                    </f:facet>
                                    <h:outputText value="#{productoCompra.producto.marca}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Modelo"/>
                                    </f:facet>
                                    <h:outputText value="#{productoCompra.producto.modelo}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Cantidad"/>
                                    </f:facet>

                                    <p:spinner value="#{productoCompra.cantidad}" min="1" max="100" size="3">
                                        <p:ajax update="productoCompraTotal lineaTotales" 
                                                listener="#{carroCompraController.onProductoIncrementoDecremento(productoCompra.producto, productoCompra.cantidad)}"/>
                                    </p:spinner>

                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Precio"/>
                                    </f:facet>
                                    <h:outputText value="#{productoCompra.producto.precio}"/>
                                </p:column>

                                <p:column>
                                    <f:facet name="header">
                                        <h:outputText value="Importe"/>
                                    </f:facet>
                                    <h:outputText id ="productoCompraTotal" value="#{productoCompra.cantidad * productoCompra.producto.precio}"/>
                                </p:column>

                                <p:column>
                                    <p:commandButton value="Eliminar producto" update="dropArea"
                                                     actionListener="#{carroCompraController.onProductoEliminar(productoCompra.producto)}"/>
                                </p:column>

                            </p:dataTable>

                            <h:panelGrid columns="2">
                                <h:outputText id ="lineaTotales" value="Total compra: #{carroCompraController.importeTotal}" style="font-weight: bold;"/>
                                <h:commandButton value="Confirmar pedido"  action="#{carroCompraController.doConfirmarCarroCompra}"/>                                
                            </h:panelGrid>
                        </p:outputPanel>
                    </p:fieldset>

                    <p:droppable for="panelCarroCompra" tolerance="touch"  
                                 activeStyleClass=".ui-state-highlight"  
                                 datasource="listadoProductos"  
                                 dropListener="#{carroCompraController.onProductoDrop}"   
                                 onDropUpdate="dropArea" /> 


                    <p:dialog header="Detalle del producto" modal="true"  
                              widgetVar="dialogoProducto" width="350" height="275">  
                        <p:outputPanel id="panelDetalleProducto" style="text-align:center;" layout="block">  
                            <h:outputText value="#{carroCompraController.productoSeleccionado.descripcion}" />
                            <h:panelGrid columns="2">
                                <h:graphicImage library="images" name="generic.jpg" width="125px"/>
                                <h:panelGrid columns="1">    
                                    <h:outputText value="Marca: #{carroCompraController.productoSeleccionado.marca}" />
                                    <h:outputText value="Modelo: #{carroCompraController.productoSeleccionado.modelo}" />
                                    <h:outputText value="Precio: #{carroCompraController.productoSeleccionado.precio}"/>                                        
                                </h:panelGrid>
                            </h:panelGrid>
                            <h:inputTextarea value="#{carroCompraController.productoSeleccionado.detalle}" 
                                             readonly="true" cols="35" rows="6"/>
                        </p:outputPanel>  

                    </p:dialog> 

                </h:form>


            </ui:define>

        </ui:composition>


    </h:body>
</html>

